import React from 'react';
import { useSelector, useDispatch } from "react-redux";
import { decrement, increment,incrementAsync } from "./counterSlice";

export function Counter() {
    const count = useSelector((state) => state.counter.value);
    //const count = useSelector(selectCount);
    const dispatch = useDispatch();
    //const [incrementAmount, setIncrementAmount] = useState('2');

    return (
        <div>
            <div>
                <button
                    aria-label="Increment value"
                    onClick={() => dispatch(increment())}
                >
                    Increment
                </button>
                <span>{count}</span>
                <button
                    aria-label="Decrement value"
                    onClick={() => dispatch(decrement())}
                >
                    Decrement
                </button>

                <button
                    onClick={() => dispatch(incrementAsync(2))}
                >
                    Add Async
                </button>
            </div>
        </div>
    )
}
